<!--  采集示例-->
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <search ref="search"  :config="searchConfig" @search="search" @getHeight="getHeight"/>
    <!-- table区域-begin -->
    <div class='page_table'>
      <vxe-grid
        ref='xGrid'
        v-bind='vexConfig'
        :align='left'
        :border='true'
        :checkbox-config='checkboxConfig'
        :columns='columns'
        :data='dataSource'
        :height='pageHeight-seachHeight-94'
        :loading='loading'
        :resizable='true'
        :showOverflow='true'
        :toolbar-config='tableToolbar'
        size='mini'
        @checkbox-change='selectChangeEvent'
        @checkbox-all='selectChangeEvent'
      >
        <template #toolbar_buttons>
          <!-- 操作按钮区域 -->
          <div class='table-operator'>
            <a-button type="primary" @click="handleAddStore">新增</a-button>
            <a-button type="primary" @click='batchDel'>删除</a-button>
            <a-button type="primary" @click="stateChange(1)">启用</a-button>
            <a-button type="primary" @click="stateChange(0)">禁用</a-button>
            <!--      <a-button type="primary" >导入</a-button>-->
            <a-button type='primary' @click="downExportXls('tpm_act_example_service')">导出</a-button>
          </div>
        </template>
        <template #exampleCode='{row,rowIndex }'>
          <a @click.stop="handleAddStore(row,'示例详情')">{{row.exampleCode}}</a>
        </template>
        <template #action='{row,rowIndex }'>
          <a @click.stop="handleAddStore(row,'编辑示例')">编辑</a>
        </template>
        <template #status='{ row }'>
          <a-switch :checked="row.status" size="small" @change="handleStatus(row,$event)"/>
        </template>
        <template #exampleType='{ row }'>
          <span>{{row.exampleType=='1'?'采集要求':'核销要求'}}</span>
        </template>
        <template #pager>
          <vxe-pager
            :currentPage.sync='ipagination.current'
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :page-size.sync='ipagination.pageSize'
            :pageSizes='ipagination.pageSizeOptions'
            :total='ipagination.total'
            @page-change='handlePageChange'>
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <!-- table区域-end -->
    <form-add-edit ref="popupForm"  @ok="modalFormOk" @upload="uploadImage" @exampleTypeCheng='exampleTypeCheng'></form-add-edit>
  </a-card>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction, postAction } from '@api/manage'
import formAddEdit from '@comp/view/base-crud/form/FormAddEdit'
import JEllipsis from "@/components/cn-form/JEllipsis";
export default {
  name: 'acquisitionColumn',
  mixins:[PageListMixin],
  components: {
    formAddEdit,JEllipsis
  },
  data () {
    return {
      description: '核销采集示例',
      searchConfig:[
        {
          // label:'订单编号',
          type:'input',
          name:'exampleCode',
          placeholder:'示例编码',
        },{
          // label:'业务员',
          type:'input',
          name:'exampleName',
          placeholder:'示例名称',
        },{
          // label:'订单状态',
          type:'a-select',
          name:'exampleType',
          option: [
            {
              name:'采集要求',
              value:'1'
            },
            {
              name:'核销要求',
              value:'2'
            }
          ],
          placeholder:'示例类型',
        },
        {
          type: 'a-select',
          name: 'status',
          placeholder: '状态',
          option: [
            {
              name: '启用',
              value: 1
            },
            {
              name: '停用',
              value: 0
            }]
        },
        ],
      // 表头
      columns: [
        { type: 'checkbox', width: 60, fixed: 'left' },
        {
          title: '示例编码',
          field: 'exampleCode',
          width: 120,
          fixed: 'left',
          slots: { default: 'exampleCode' }
        },
        {
          title: '示例名称',
          field: 'exampleName',
          minWidth: 80,
          fixed: 'left'
        },
        {
          title: '示例类型',
          width: 100,
          field: 'exampleType',
          slots: { default: 'exampleType' },
        },
        {
          title: '适用角色',
          field: 'roleNames',
          minWidth: 80,
        },
        {
          title: '备注',
          minWidth: 80,
          field: 'remarks',
        },
        {
          title: '创建人',
          minWidth: 80,
          field: 'createName',

        },
        {
          title: '创建时间',
          minWidth: 80,
          field: 'createTime',
        },
        {
          title: '更新人',
          minWidth: 80,
          field: 'updateName',

        },
        {
          title: '更新时间',
          minWidth: 120,
          field: 'updateTime',
        },
        {
          title: '状态',
          field: 'status',
          minWidth: 80,
          slots: { default: 'status' },
        },
        {
          title: '操作',
          field: 'action',
          minWidth: 80,
          fixed: 'right',
          slots: { default: 'action' },
        }
      ],

      url: {
        // 例表接口
        list: window._CONFIG['domianTpmURL']+ "/act/example/findPageList",
        // 详情接口
        detail: window._CONFIG['domianTpmURL']+ "/act/example/getInfo",
        // 导出接口
        // exportXlsUrl: window._CONFIG['domianTpmURL']+ "/budget/tpmBudgetYear/deleteBatch",
        // 删除接口
        deleteBatch:window._CONFIG['domianTpmURL']+ "/act/example/delete",
        // 启停用接口
        status:window._CONFIG['domianTpmURL']+ "/act/example/invokeOrBlockUp",
        startOrStopUrl: window._CONFIG['domianTpmURL']+ "/act/example/invokeOrBlockUp",
      },
    }
  },
  created() {
  },

  computed: {
    // importExcelUrl: function(){
    //   return `${window._CONFIG['domianTpmURL']}/${this.url.importExcelUrl}`;
    // }
  },
  // .jpg, .jpeg, .png
  methods: {
    handleAddStore:async function(record,title='新增示例') {
      let config = {
        title: title,
        width: 800,
        disableSubmit:title=='示例详情'?true:false,
        addOrUpdateUrl: `${window._CONFIG['domianTpmURL']}/act/example/saveOrUpdate`,  //审核地址
        method: 'post',
        list: [
          {
            label: '示例类型',
            type: 'a-select',
            placeholder: '请选择示例类型',
            name: 'exampleType',  // 后台接受字段
            fun:'exampleTypeCheng',
            disabled:title=='示例详情'?true:false,
            check: { rules: [{ required: true, message: '请选择示例类型' }] },
            option: [
              {
                name:'采集要求',
                value:1
              },
              {
                name:'核销要求',
                value:2
              }
            ]
          },
          {
            label: '示例名称',
            type: 'input',
            placeholder: '请输入示例名称',
            disabled:title=='示例详情'?true:false,
            name: 'exampleName',  // 后台接受字段
            check: { rules: [{ required: true, message: '请输入示例名称' }] },
          },
          {
            label: '角色',
            type: 'j-role',
            placeholder: '请选择角色',
            name:'roleCodes',
            disabled:title=='示例详情'?true:false,
            name2: 'roleNames',  // 后台接受字段
            multiple:true,
            check: { rules: [{ required: true, message: '请选择角色' }] },
          },
          {
            label: '备注',
            type: 'textarea',
            disabled:title=='示例详情'?true:false,
            placeholder: '请输入备注',
            name: 'remarks',  // 后台接受字段
            // check: { rules: [{ required: true, message: '请选择月度' }] },
          },
          {
            label: '文件或照片',
            type: 'j-upload',
            disabled:title=='示例详情'?true:false,
            placeholder: '请输入备注',
            name: 'file',  // 后台接受字段
            fun:'upload'
            // check: { rules: [{ required: true, message: '请选择月度' }] },
          },
        ]
      }
      if(record.id){
        const res = await getAction(this.url.detail, {id: record.id})
        if (res && res.result) {
          record = res.result
          record.files=record.exampleFileVos
          record.file=record.exampleFileVos.map((v,index)=>{
            let obj = {
              uid:index,
              url: v.urlPath,
              fileName:v.fileName
            }
            return obj
           })
        }else{
          this.$message.error(res.message)
        }
      }
      this.$refs.popupForm.edit(record,config )
      this.$refs.popupForm.disableSubmit = false
      if(record.exampleType==1){
        this.$refs.popupForm.accept='.jpg, .jpeg, .png'
        this.$refs.popupForm.config.list[2].show=true
      }
      if(record.exampleType==2){
        this.$refs.popupForm.accept=''
        this.$refs.popupForm.config.list[2].show=false
      }
    },
    uploadImage(list){
      let arry=[]
      list.map(v=>{
          arry.push({
             fileName:v.name,
             urlPath:v.url
          })
       })
        this.$refs.popupForm.model.files=arry
    },
    exampleTypeCheng(e){
      if(e==1){
        this.$refs.popupForm.accept='.jpg, .jpeg, .png'
        this.$refs.popupForm.config.list[2].show=true
      }else {
        this.$refs.popupForm.accept=''
        this.$refs.popupForm.config.list[2].show=false
      }
    },

  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
///deep/ .ant-pagination{
//  float:right;
//}

///deep/ .resize-table-th {
//  position: relative;
//}
///deep/ .table-draggable-handle {
//  height: 100% !important;
//  bottom: 0;
//  left: auto !important;
//  right: -5px;
//  cursor: col-resize;
//  touch-action: none;
//}

</style>